---
title: React Sticky Banner - Flowbite
description: Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS
---

Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area.

Explore the following examples based on various styles, sizes, and positionings to leverage the sticky banner component and increase marketing conversions with a responsive element supporting dark mode.

To start using the banner component you need to import it from `flowbite-react`:

```jsx
import { Banner } from "flowbite-react";
```

## Default sticky banner

Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner.

<Example name="banner.root" />

## Bottom banner position

This example can be used to position the sticky banner to the bottom side of the page instead of the top side.

<Example name="banner.bottomPosition" />

## Marketing CTA banner

Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner. Set a different width by using the `max-w-{*}` utility classes from Tailwind CSS.

<Example name="banner.marketingCTA" />

## Newsletter sign-up banner

This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.

<Example name="banner.newsletter" />

## Informational banner

This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links.

<Example name="banner.informational" />

## Theme

**This component is a work in progress, and currently doesn't have a theme.** It may in future updates.

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

## References

- [Flowbite Banner](https://flowbite.com/docs/components/banner/)
